import 'package:flutter/material.dart';
import 'package:player_plugin/video_speed.dart';

class VideoSpeedBar extends StatelessWidget {
  final List<VideoSpeedItem> speedItemList;
  final VideoSpeedItemStyle style;
  final ValueChanged<int>? onTapItem;
  final VoidCallback? onHidden;
  final bool hidden;
  final int selectedIndex;

  VideoSpeedBar({
    Key? key,
    required this.speedItemList,
    VideoSpeedItemStyle? style,
    this.onTapItem,
    this.onHidden,
    this.hidden = true,
    this.selectedIndex = 0,
  })  : style = style ?? VideoSpeedItemStyle(),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Offstage(
      offstage: hidden,
      child: GestureDetector(
        onTap: onHidden,
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.5),
          ),
          child: Align(
            child: Flow(
              delegate: VideoSpeedBarFlowDelegate(itemWidth: style.itemSize.width),
              children: buildItems(selectedIndex: selectedIndex),
            ),
          ),
        ),
      ),
    );
  }

  List<Widget> buildItems({required int selectedIndex}) {
    List<Widget> list = [];
    for (int i = 0; i < speedItemList.length; i++) {
      VideoSpeedItem item = speedItemList[i];
      Widget widget = VideoSpeedItemWidget(
        style: style,
        title: item.title,
        selected: i == selectedIndex,
        onTap: () {
          onTapItem?.call(i);
        },
      );
      list.add(widget);
    }
    return list;
  }
}

class VideoSpeedBarFlowDelegate extends FlowDelegate {
  VideoSpeedBarFlowDelegate({required this.itemWidth});

  final double itemWidth;

  @override
  void paintChildren(FlowPaintingContext context) {
    double row1Height = context.size.height / 2 - 10;
    double row2Height = context.size.height / 2 + 10;
    double distanceLeft = 67.0;
    double space = (context.size.width - distanceLeft * 2 - itemWidth * 4) / 3;
    //计算每一个子widget的位置
    for (int i = 0; i < context.childCount; i++) {
      switch (i) {
        case 0:
          context.paintChild(i,
              transform: Matrix4.translationValues(
                  67, row1Height - context.getChildSize(i)!.height, 0.0));
          break;
        case 1:
          context.paintChild(i,
              transform: Matrix4.translationValues(67 + i * (itemWidth + space),
                  row1Height - context.getChildSize(i)!.height, 0.0));
          break;
        case 2:
          context.paintChild(i,
              transform: Matrix4.translationValues(67 + i * (itemWidth + space),
                  row1Height - context.getChildSize(i)!.height, 0.0));
          break;
        case 3:
          context.paintChild(i,
              transform: Matrix4.translationValues(67, row2Height, 0.0));
          break;
        case 4:
          context.paintChild(i,
              transform: Matrix4.translationValues(
                  67 + 1 * (itemWidth + space), row2Height, 0.0));
          break;
        case 5:
          context.paintChild(i,
              transform: Matrix4.translationValues(
                  67 + 2 * (itemWidth + space), row2Height, 0.0));
          break;
        case 6:
          context.paintChild(i,
              transform: Matrix4.translationValues(
                  67 + 3 * (itemWidth + space), row2Height, 0.0));
          break;
      }
    }
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return oldDelegate != this;
  }
}

class VideoSpeedItemWidget extends StatelessWidget {
  final VoidCallback? onTap;
  final VideoSpeedItemStyle style;
  final String title;
  final bool selected;

  const VideoSpeedItemWidget({
    Key? key,
    required this.style,
    required this.title,
    this.onTap,
    this.selected = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: style.itemSize.width,
        height: style.itemSize.height,
        alignment: style.alignment,
        decoration: BoxDecoration(
          color: style.backgroundColor,
          borderRadius: style.radius,
        ),
        child: Text(
          title,
          style: selected? style.selectedTextStyle : style.textStyle,
          textAlign: style.textAlign,
        ),
      ),
    );
  }
}
